<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        Vue模板语法有2大类：
            1、插值语法：
                功能：用于解析标签体内容
                写法：{{xxx}} 。xxx是js表达式，且可以直接读取到data中的所有属性。
            2、指令语法：
                功能：用于解析标签(包括：标签属性、标签体内容、绑定事件......)。
                举例：v-bind:href="xxx" 或者 简写成 :href="xxx" 。 xxx同样要写成js表达式。
                    且可以直接读取到data中的所有属性。
                备注：Vue中有很多指令，且形式都是：v-???，此处我么只是拿v-bind举个例子。
     -->
    <div class="app">
        <!-- 插值{{}} -->
        <p @click="handleClick">插值语法：{{name.toUpperCase()}},{{address}},{{Date.now()}}</p>
        <!-- 指令语法 v-bind:href="url" 或者 :href="url" -->
        <a :href="url">去官网</a>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '.app',//document.getElementById('app')
            data: {
                name: 'Fairy',
                address: '上海',
                url: 'https://case.heymeo.net'
            },
            methods: {
                handleClick() {
                    this.title += 1
                }
            },
        })
    </script>
</body>

</html>